<template>
<div style="margin:auto;width: max-content;" >
    <div>
        <h1>职称管理</h1>
        职称名:<el-input v-model="add_name" placeholder="请输入职称" style="width:200px;margin-right:20px"></el-input> 
        挂号费:<el-input v-model="add_money" placeholder="请输入挂号费" style="width:200px"></el-input> 
        <el-button type="primary" style="margin-left:20px" @click="addTitle">添加</el-button>
    </div>
    <el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" max-height="580px" style="width: max-content">
        <el-table-column type="index" width="50" label="序号">  </el-table-column>
            <el-table-column  label="职称" prop="name" width="300" align="center"> </el-table-column>
            <el-table-column  label="挂号费" prop="money" width="300" align="center"> </el-table-column>
            <el-table-column align="right" width="300">
            <template slot="header" slot-scope="scope">
                <el-input  v-model="search" @change="change(scope)" size="mini"  placeholder="输入职称关键字搜索"/>
            </template>
            <template slot-scope="scope">
                <el-button size="mini"  @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                <el-popconfirm title="确定删除吗？"  @confirm="handleDelete(scope.$index, scope.row)">
                    <el-button slot="reference"  size="mini" type="danger">删除</el-button>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog title="修改职称" :visible.sync="dialogFormVisible" width="max-content">
        <el-form :model="form">
            <el-form-item label="职称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off" placeholder="职称名:" style="width:300px"></el-input>
            </el-form-item>
            <el-form-item label="挂号费" :label-width="formLabelWidth">
                <el-input v-model="form.money" autocomplete="off" placeholder="挂号费:" style="width:300px"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="onedit">确 定</el-button>
        </div>
    </el-dialog>
</div>


</template>
<script>
import axios from 'axios';
  export default {
    data() {
      return {
        formLabelWidth:'80px',
        dialogFormVisible:false,
        add_name:'',
        add_money:'',
        form: {
          id:'',
          name: '',
          money:''
        },
        tableData: [],
        search: ''
      }
    },
    methods: {
      handleEdit(index, row) {
        this.dialogFormVisible=true;
        this.form.name = row.name
        this.form.money = row.money
        this.form.id = row.id
      },
      handleDelete(index, row) {
         axios.get("http://192.168.6.189:8080/hpl-title/getDocById?id="+row.id).then((r) => {
             //允许删除
            if(r.data.code == 200){
                //删除
                axios.get("http://192.168.6.189:8080/hpl-title/delById?id="+row.id).then((r) => {
                    if(r.data.code == 200){
                        this.$message({
                            message: '删除成功！',
                            type: 'success'
                        });
                        //查询删除后的职称
                        axios.get("http://192.168.6.189:8080/hpl-title/getAll").then((r) => {
                            if(r.data.code == 200){
                                this.tableData = r.data.data;
                                
                            }
                        })
                    }
                })
            }else{
                this.$message.error('该职称下还有医生，不能删除！');
            }
        })
      },
      addTitle(){
           axios.post("http://192.168.6.189:8080/hpl-title/add",{
              name:this.add_name,
              money:this.add_money
          }).then((r) => {
            if(r.data.code == 200){
                axios.get("http://192.168.6.189:8080/hpl-title/getAll").then((r) => {
                    if(r.data.code == 200){
                        this.tableData = r.data.data;
                    }
                })
            }else{ 
                this.$message.error(r.data.msg);
                this.add_name='';
                this.add_money='';
            }
        })
      },
      onedit(){
          axios.post("http://192.168.6.189:8080/hpl-title/updateName",{
              id:this.form.id,
              name:this.form.name,
              money:this.form.money
          }).then((r) => {
            if(r.data.code == 200){
                axios.get("http://192.168.6.189:8080/hpl-title/getAll").then((r) => {
                    if(r.data.code == 200){
                        this.tableData = r.data.data;
                        this.dialogFormVisible=false;
                    }
                })
            }
        })
      }
    },
    mounted(){
        axios.get("http://192.168.6.189:8080/hpl-title/getAll").then((r) => {
            if(r.data.code == 200){
                this.tableData = r.data.data;
            }
        })
    }
  }
</script>

<style scope>
    /* .el-card__body{
        padding: 5px !important;
    } */
</style>